<template>
	<view class="mainPage">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">首页推荐</block>
		</cu-custom>
		<view class="recommend-tips ">
			<view class="padding text-bold">当前推荐位人数</view>
			<view class="recommend-num themeColor">
				<text>{{ info.recommendNum }}</text>
				<text>/</text>
				<text>8</text>
			</view>
		</view>
		<view class="custom padding padding-top-0">
			<view class="bg-white padding-sm radius-xl">
				<view class="margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>
					<text class="text-black">兑换天数</text>
				</view>
				<view class="crow bg-gray radius-lg">
					<input type="number" placeholder="0" class="input" v-model="form.num" maxlength="8">
					<text class="padding-right themeColor">天</text>
				</view>
				<view class="inc text-sm margin-top-sm">
					您当前拥有：
					<text class="text-red">金券*{{ info.recommend_gold_num }}</text>，
					<text class="text-red">银券*{{ info.recommend_silver_num }}</text>，
					<text class="text-red">最高可兑换{{ maxDay }}天</text>
				</view>
			</view>
		</view>
		<view class="submit padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg round shadow china-btn-bg" @click="submit()">兑换</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: {
				recommend_silver_num: '--',
				recommend_gold_num: '--',
				recommendNum: '--'
			},
			form: {
				num: ''
			}
		};
	},
	computed: {
		maxDay() {
			let n = this.info.recommend_gold_num;
			if (this.info.recommend_silver_num > 0) {
				n += Math.floor(this.info.recommend_silver_num / 5);
			}
			return n;
		}
	},
	onLoad() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			this.$utils.$api.Technician.info().then(data => {
				this.info = data;
			})
		},
		submit() {
			if(this.form.num>this.maxDay){
				this.$utils.$message.error('超过最大兑换天数');
				return;
			}
			this.$utils.$api.Technician.recommendExchange(this.form).then(res=>{
				this.$utils.$message.success(res.msg);
				this.getInfo();
				setTimeout(()=>{
					this.$utils.$page.switch('/pages/index/index');
				},1000)
			}).catch(err=>{
				this.$utils.$message.error(err.msg);
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend-tips {
	.recommend-num {
		padding: 40px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 120rpx;
		font-weight: bold;
		text-shadow: 0 0 10rpx #fff;
		text-align: center;

		> text {
			margin: 0 10rpx;
		}
	}
}

.item.crow {
	background-color: #FFFFFF;
	padding: 44rpx;
}

.crow {
	justify-content: space-between;
	padding: 15upx;

	.icon {
		width: 60rpx;
		height: 60rpx;
	}

	.input {
		font-size: 36px;
		font-weight: bold;
		padding: 10px 20px;
	}

	.right {
		flex: 1;
	}
}</style>
